<!DOCTYPE html>
<html lang="en">
{{template "header" .}}
<body>
<div>
    {{template "nav" .}}
    <div class="container">
        <div class="normal-container">
            <article id="messageToast" class="message is-danger" style="display: none">
                <div class="message-body" id="messageToastText">

                </div>
            </article>
            {{template "progress"}}
            <div class="box" style="padding-top: 0">
                <div class="table-container">
                    <div class="box" style="padding-top: 0">
                        <script>
                            // Credit: https://codepen.io/t7team/pen/ZowdRN
                            function openTab(e, tabName) {
                                window.history.pushState("", "", `/manage?tab=${tabName}`);
                                let i, x, tabLinks;
                                x = document.getElementsByClassName('content-tab');
                                for (i = 0; i < x.length; i++) {
                                    x[i].style.display = 'none';
                                }
                                tabLinks = document.getElementsByClassName('tab');
                                for (i = 0; i < x.length; i++) {
                                    if (tabLinks[i]) {
                                        tabLinks[i].className = tabLinks[i].className.replace(' is-active', '');
                                    }
                                }
                                document.getElementById(tabName).style.display = 'block';
                                e.className += ' is-active';
                            }
                        </script>
                        <article class="media">
                            <div class="media-content">
                                <div class="content">
                                    <div>
                                        <div class="tabs">
                                            <ul style="margin-left: 0">
                                                {{if .isAdmin}}
                                                <li id="statusTabList" class="tab" onclick="openTab(this,'statusTab')">
                                                    <a>系统状况</a></li>
                                                <li id="userTabList" class="tab" onclick="openTab(this,'userTab')"><a>账户管理</a></li>
                                                <li id="fileTabList" class="tab" onclick="openTab(this,'fileTab')"><a>文件管理</a></li>
                                                <li id="settingTabList" class="tab" onclick="openTab(this,'settingTab')"><a>系统设置</a></li>
                                                {{else}}
                                                <li id="userTabList" class="tab" onclick="openTab(this,'userTab')"><a>账户管理</a>
                                                </li>
                                                <li id="fileTabList" class="tab" onclick="openTab(this,'fileTab')"><a>文件管理</a></li>
                                                {{end}}
                                            </ul>
                                        </div>
                                        {{if .isAdmin}}
                                        <div id="statusTab" class="content-tab" style="display: block;">
                                        {{else}}
                                        <div id="statusTab" class="content-tab" style="display: none;">
                                        {{end}}
                                            <div class="field is-grouped is-grouped-multiline">
                                                <div class="control">
                                                    <div class="tags has-addons">
                                                        <span class="tag is-dark">系统运行时间</span>
                                                        <span class="tag is-info">{{.uptime}}</span>
                                                    </div>
                                                </div>

                                                <div class="control">
                                                    <div class="tags has-addons">
                                                        <span class="tag is-dark">系统内存占用</span>
                                                        <span class="tag is-info">{{.memory}}</span>
                                                    </div>
                                                </div>

                                                <div class="control">
                                                    <div class="tags has-addons">
                                                        <span class="tag is-dark">注册用户数</span>
                                                        <span class="tag is-success">{{.userNum}}</span>
                                                    </div>
                                                </div>

                                                <div class="control">
                                                    <div class="tags has-addons">
                                                        <span class="tag is-dark">上传文件数</span>
                                                        <span class="tag is-primary">{{.fileNum}}</span>
                                                    </div>
                                                </div>
                                                <div class="control">
                                                    <div class="tags has-addons">
                                                        <span class="tag is-dark">上传图片数</span>
                                                        <span class="tag is-primary">{{.imageNum}}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <button id="checkUpdateBtn" class="button is-light" onclick="checkUpdate()">检查更新</button>
                                            <script src="/public/lib/marked.umd.min.js"></script>
                                            <script>
                                                async function checkUpdate() {
                                                    let currentVersion = "{{.option.Version}}";
                                                    let checkUpdateBtn = document.getElementById("checkUpdateBtn");
                                                    checkUpdateBtn.className += " is-loading";
                                                    let res = await fetch("https://api.github.com/repos/songquanpeng/go-file/releases/latest");
                                                    res = await res.json();
                                                    if (res.tag_name === currentVersion) {
                                                        showToast("已是最新版本");
                                                    } else {
                                                        let html = marked.parse(res.body);
                                                        html += `<div class="field is-grouped is-grouped-right">`;
                                                        res.assets.forEach(function (asset) {
                                                            html += `<div class="control">
                                                                <a class="button is-light" href="${asset.browser_download_url}" download="${asset.name}">下载 ${asset.name}</a>
                                                            </div>`;
                                                        });
                                                        html += `</div>`;
                                                        showGeneralModal(`新版本：${res.tag_name}`, html);
                                                    }
                                                    checkUpdateBtn.className = checkUpdateBtn.className.replace(' is-loading', '');
                                                }
                                            </script>
                                            {{if .StatEnabled}}
                                            <script src="/public/lib/echarts.min.js"></script>

                                            <div id="reqChart" style="height: 500px"></div>
                                            <div id="urlChart" style="height: 500px"></div>
                                            <div id="ipChart" style="height: 500px"></div>
                                            <script>
                                                // https://echarts.apache.org/examples/zh/index.html
                                                (async function () {
                                                    let dom = document.getElementById("reqChart");
                                                    let res = await fetch("/api/stat/req");
                                                    let data = await res.json();

                                                    let myChart = echarts.init(dom, null, {
                                                        renderer: 'canvas',
                                                        useDirtyRect: false
                                                    });
                                                    let names = [];
                                                    let values = [];
                                                    for (let i = 0; i < data.data.length; i++) {
                                                        names.push(data.data[i].name);
                                                        values.push(data.data[i].value);
                                                    }
                                                    let option = {
                                                        title: {
                                                            text: '访问趋势图'
                                                        },
                                                        xAxis: {
                                                            type: 'category',
                                                            data: names
                                                        },
                                                        yAxis: {
                                                            type: 'value'
                                                        },
                                                        series: [
                                                            {
                                                                data: values,
                                                                type: 'line',
                                                                smooth: true
                                                            }
                                                        ]
                                                    };

                                                    if (option && typeof option === 'object') {
                                                        myChart.setOption(option);
                                                    }

                                                    window.addEventListener('resize', myChart.resize);
                                                })();
                                                (async function () {
                                                    let dom = document.getElementById("ipChart");
                                                    let res = await fetch("/api/stat/ip");
                                                    let data = await res.json();

                                                    let myChart = echarts.init(dom, null, {
                                                        renderer: 'canvas',
                                                        useDirtyRect: false
                                                    });

                                                    let option = {
                                                        title: {
                                                            text: '高频访问 IP',
                                                            subtext: `Top ${data.data.length}`,
                                                            left: 'center'
                                                        },
                                                        tooltip: {
                                                            trigger: 'item'
                                                        },
                                                        legend: {
                                                            orient: 'vertical',
                                                            left: 'left'
                                                        },
                                                        series: [
                                                            {
                                                                name: '来自',
                                                                type: 'pie',
                                                                radius: '50%',
                                                                data: data.data,
                                                                emphasis: {
                                                                    itemStyle: {
                                                                        shadowBlur: 10,
                                                                        shadowOffsetX: 0,
                                                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                                    }
                                                                }
                                                            }
                                                        ]
                                                    };

                                                    if (option && typeof option === 'object') {
                                                        myChart.setOption(option);
                                                    }

                                                    window.addEventListener('resize', myChart.resize);
                                                })();
                                                (async function () {
                                                    let dom = document.getElementById("urlChart");
                                                    let res = await fetch("/api/stat/url");
                                                    let data = await res.json();

                                                    let myChart = echarts.init(dom, null, {
                                                        renderer: 'canvas',
                                                        useDirtyRect: false
                                                    });

                                                    let option = {
                                                        title: {
                                                            text: '高频访问 URL',
                                                            subtext: `Top ${data.data.length}`,
                                                            left: 'center'
                                                        },
                                                        tooltip: {
                                                            trigger: 'item'
                                                        },
                                                        legend: {
                                                            orient: 'vertical',
                                                            left: 'left'
                                                        },
                                                        series: [
                                                            {
                                                                name: '来自',
                                                                type: 'pie',
                                                                radius: '50%',
                                                                data: data.data,
                                                                emphasis: {
                                                                    itemStyle: {
                                                                        shadowBlur: 10,
                                                                        shadowOffsetX: 0,
                                                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                                    }
                                                                }
                                                            }
                                                        ]
                                                    };

                                                    if (option && typeof option === 'object') {
                                                        myChart.setOption(option);
                                                    }

                                                    window.addEventListener('resize', myChart.resize);
                                                })();
                                            </script>
                                            {{end}}
                                        </div>
                                            {{if .isAdmin}}
                                            <div id="userTab" class="content-tab" style="display: none;">
                                            {{else}}
                                            <div id="userTab" class="content-tab" style="display: block;">
                                            {{end}}
                                            <h3>我的账户</h3>
                                            <div class="columns">
                                                <div class="column">
                                                    <label class="label">更改显示名称</label>
                                                    <div class="field has-addons">
                                                        <p class="control is-expanded">
                                                            <input class="input" name="username" id="inputDisplayName"
                                                                   type="text"
                                                                   placeholder="请输入新的显示名称">
                                                        </p>
                                                        <p class="control">
                                                            <a class="button"
                                                               onclick="updateUser('displayName', 'inputDisplayName')">提交</a>
                                                        </p>
                                                    </div>
                                                    <label class="label">其他操作</label>
                                                    <div class="buttons">
                                                        <a class="button is-light" href="/logout">注销</a>
                                                        <a class="button is-light" onclick="generateNewToken()">生成新的 Token</a>
                                                    </div>
                                                </div>
                                                <div class="column">
                                                    <label class="label">更改密码</label>
                                                    <div class="field has-addons">
                                                        <p class="control is-expanded">
                                                            <input class="input" name="username" id="inputPassword"
                                                                   type="text"
                                                                   autocomplete="new-password"
                                                                   placeholder="请输入新的密码">
                                                        </p>
                                                        <p class="control">
                                                            <a class="button"
                                                               onclick="updateUser('password', 'inputPassword')">提交</a>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                            {{if .isAdmin}}
                                            <h3 style="margin-top: 16px">添加用户</h3>
                                            <div class="field has-addons">
                                                <p class="control">
                                                    <span class="select">
                                                      <select id="newUserType">
                                                        <option value=1>普通用户</option>
                                                        <option value=10>管理员用户</option>
                                                      </select>
                                                    </span>
                                                </p>
                                                <p class="control">
                                                    <input class="input" type="text" placeholder="用户名" id="newUserName">
                                                </p>
                                                <p class="control">
                                                    <input class="input" type="password" placeholder="密码"
                                                           id="newUserPassword" autocomplete="new-password">
                                                </p>
                                                <p class="control">
                                                    <a class="button" onclick="createUser()">
                                                        提交
                                                    </a>
                                                </p>
                                            </div>
                                            <h3>管理用户</h3>
                                            <div class="field has-addons">
                                                <p class="control">
                                                    <span class="select">
                                                      <select id="manageAction">
                                                        <option value="disable">封禁用户</option>
                                                        <option value="enable">解封用户</option>
                                                        <option value="delete">删除用户</option>
                                                        <option value="promote">提升为管理员</option>
                                                        <option value="demote">降级为普通用户</option>
                                                      </select>
                                                    </span>
                                                </p>
                                                <p class="control">
                                                    <input class="input" type="text" placeholder="用户名"
                                                           id="manageUserName">
                                                </p>
                                                <p class="control">
                                                    <a class="button" onclick="manageUser()">
                                                        提交
                                                    </a>
                                                </p>
                                            </div>
                                            {{end}}
                                        </div>
                                        <div id="fileTab" class="content-tab" style="display: none;">
                                            <label class="label">删除指定图片</label>
                                            <div class="field has-addons">
                                                <div class="control is-light is-expanded">
                                                    <input class="input url-input" id="inputDeleteImage" type="url"
                                                           value="" placeholder="请输入待删除图片的 URL">
                                                </div>
                                                <div class="control">
                                                    <a class="button is-light" onclick="deleteImage()">
                                                        删除
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="settingTab" class="content-tab" style="display: none;">
                                            <div class="columns">
                                                <div class="column">
                                                    <h3>权限设置</h3>
                                                    <label class="label">文件上传的最低权限要求：</label>
                                                    <div class="field has-addons">
                                                        <p class="control">
                                                    <span class="select">
                                                      <select id="FileUploadPermission"
                                                              onchange="updateOption('FileUploadPermission', 'FileUploadPermission')">
                                                          <option value=0>访客用户</option>
                                                          <option value=1>普通用户</option>
                                                          <option value=10>管理员用户</option>
                                                      </select>
                                                    </span>
                                                        </p>
                                                    </div>
                                                    <label class="label">文件下载的最低权限要求：</label>
                                                    <div class="field has-addons">
                                                        <p class="control">
                                                    <span class="select">
                                                      <select id="FileDownloadPermission"
                                                              onchange="updateOption('FileDownloadPermission', 'FileDownloadPermission')">
                                                          <option value=0>访客用户</option>
                                                          <option value=1>普通用户</option>
                                                          <option value=10>管理员用户</option>
                                                      </select>
                                                    </span>
                                                        </p>
                                                    </div>
                                                    <label class="label">图片上传的最低权限要求：</label>
                                                    <div class="field has-addons">
                                                        <p class="control">
                                                    <span class="select">
                                                      <select id="ImageUploadPermission"
                                                              onchange="updateOption('ImageUploadPermission', 'ImageUploadPermission')">
                                                          <option value=0>访客用户</option>
                                                          <option value=1>普通用户</option>
                                                          <option value=10>管理员用户</option>
                                                      </select>
                                                    </span>
                                                        </p>
                                                    </div>
                                                    <label class="label">图片下载的最低权限要求：</label>
                                                    <div class="field has-addons">
                                                        <p class="control">
                                                    <span class="select">
                                                      <select id="ImageDownloadPermission"
                                                              onchange="updateOption('ImageDownloadPermission', 'ImageDownloadPermission')">
                                                          <option value=0>访客用户</option>
                                                          <option value=1>普通用户</option>
                                                          <option value=10>管理员用户</option>
                                                      </select>
                                                    </span>
                                                        </p>
                                                    </div>
                                                    <script>
                                                        (function () {
                                                            document.getElementById('FileUploadPermission').value = "{{.FileUploadPermission}}";
                                                            document.getElementById('FileDownloadPermission').value = "{{.FileDownloadPermission}}";
                                                            document.getElementById('ImageUploadPermission').value = "{{.ImageUploadPermission}}";
                                                            document.getElementById('ImageDownloadPermission').value = "{{.ImageDownloadPermission}}";
                                                        })();
                                                    </script>
                                                    <h3>统计设置</h3>
                                                    <label class="label">是否启用访问数据统计：</label>
                                                    <div class="field has-addons">
                                                        <p class="control">
                                                    <span class="select">
                                                      <select id="StatEnabled" onchange="updateOption('StatEnabled', 'StatEnabled', '{{.StatEnabled}}')">
                                                          <option value="false">不启用</option>
                                                          <option value="true">启用</option>
                                                      </select>
                                                    </span>
                                                        </p>
                                                    </div>
                                                    <script>
                                                        (function () {
                                                            document.getElementById('StatEnabled').value = "{{.StatEnabled}}";
                                                        })();
                                                    </script>
                                                </div>
                                                <div class="column">
                                                    <h3>系统自定义</h3>
                                                    <label class="label">修改网站名</label>
                                                    <div class="field has-addons">
                                                        <div class="control is-light is-expanded">
                                                            <input class="input url-input" id="inputWebsiteName"
                                                                   type="text" value="{{.option.WebsiteName}}" placeholder="请输入新的站点名称">
                                                        </div>
                                                        <div class="control">
                                                            <a class="button is-light"
                                                               onclick="updateOption('WebsiteName', 'inputWebsiteName')">
                                                                更新
                                                            </a>
                                                        </div>
                                                    </div>
                                                    <label class="label">修改底部信息</label>
                                                    <div class="field has-addons">
                                                        <div class="control is-light is-expanded">
                                                            <input class="input url-input" id="inputFooterInfo"
                                                                   type="text" value="{{.option.FooterInfo}}" placeholder="请输入 HTML 代码">
                                                        </div>
                                                        <div class="control">
                                                            <a class="button is-light"
                                                               onclick="updateOption('FooterInfo', 'inputFooterInfo')">
                                                                更新
                                                            </a>
                                                        </div>
                                                    </div>
                                                    <label class="label">公告设置</label>
                                                    <div class="field">
                                                        <div class="control is-light">
                                                            <textarea class="textarea" id="inputNotice" placeholder="请输入 HTML 代码">{{.option.Notice}}</textarea>
                                                        </div>
                                                    </div>
                                                    <div class="field">
                                                        <a class="button is-light" onclick="updateOption('Notice', 'inputNotice')">
                                                            更新
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </article>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        (function () {
            let params = new URLSearchParams(window.location.search);
            let tabName = params.get("tab");
            if (!tabName) {
                {{if .isAdmin}}
                tabName = "statusTab";
                {{else}}
                tabName = "userTab";
                {{end}}
            }
            openTab(document.getElementById(tabName + "List"), tabName);
        })();
    </script>
    {{template "footer" .}}
</div>

{{template "modal"}}

</body>
</html>
